<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName">
          <!-- 第一部分，用户管理 -->
          <el-tab-pane label="用户管理" name="first">
            <el-row>
              <el-button style="margin:30px 0 10px" icon="el-icon-plus" type="primary" @click="addRules">新增角色</el-button>
            </el-row>
            <el-row>
              <el-table
                :data="tableData"
                style="width: 100%;margin:30px 0"
                :default-sort="{prop: 'date', order: 'descending'}"
                :border="true"
              >
                <el-table-column prop="id" label="序号" sortable width="120" type="index" align="center" />
                <el-table-column prop="name" label="角色名" sortable width="240" align="center" />
                <el-table-column prop="description" label="描述" />
                <el-table-column fixed="right" label="操作" width="300" align="center">
                  <!-- 通过 作用域插槽 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 -->
                  <template v-slot="{row}">
                    <el-button type="success" size="small" @click="assignPerm(row.id)">分配权限</el-button>
                    <el-button type="primary" size="small" @click="editRoles(row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="delRoles(row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <!-- 分页组件 -->
            <el-row type="flex" justify="center" align="middle" style="height:60px">
              <el-pagination
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.pagesize"
                :current-page="page.page"
                @current-change="changePage"
              />
            </el-row>
          </el-tab-pane>
          <!-- 第二部分，配置管理 -->
          <el-tab-pane label="配置管理" name="second">
            <el-alert type="info" :show-icon="true" :closable="false" title="对公司名称，公司地址，营业执照，公司地区的更新，将使得公司资料被重新审核,请谨慎修改！" />
            <el-form label-width="120px" style="margin-top:50px">
              <el-form-item label="公司名称">
                <el-input v-model="formData.name" disabled style="width:700px" />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="formData.companyAddress" disabled style="width:700px" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="formData.mailbox" disabled style="width:700px" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="formData.remarks" type="textarea" :rows="3" disabled style="width:700px" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>

      <!-- 编辑的弹出层 -->
      <editRoles ref="childFun" :is-dialog-show.sync="isDialogShow" :rules-data="thatRulesData" @updateForm="updateForm" />
      <!-- 分配权限的弹出层 -->
      <el-dialog title="分配权限" :visible="isPermDialogShow" @close="btnPermCancel">
        <!-- 权限是一颗树 -->
        <!-- 将数据绑定到组件上 -->
        <!-- show-checkbox:节点前边显示复选框，可被选择，值为boolean。 -->
        <!-- check-strictly: 如果为true 那表示父子勾选时 不互相关联;如果为false就互相关联 -->
        <!-- id作为唯一标识 -->
        <el-tree
          ref="permTree"
          :data="permData"
          :props="defaultProps"
          :show-checkbox="true"
          :check-strictly="true"
          :default-expand-all="true"
          :default-checked-keys="selectCheck"
          node-key="id"
        />

        <!-- 确定 取消-->
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button type="primary" size="small" @click="btnPermOK">确定</el-button>
            <el-button size="small" @click="btnPermCancel">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getCompanyUserInfoAPI, getCompanyInfoAPI, delCompanyRolesInfoAPI, getCompanyRolesInfoAPI, assignPermAPI, getPermissionListAPI } from '@/api/index'
import { mapGetters } from 'vuex'
import editRoles from './components/edit-rules.vue'
import { tranListToTreeData } from '@/utils/index'
export default {
	name: 'Setting',
	components: {
		editRoles
	},
	data() {
      return {
        activeName: 'first',
				tableData: [], // 声明一个变量，保存公司的所有角色列表
				formData: {}, // 声明一个变量，保存公司的信息数据
				isDialogShow: false, // 声明一个变量，控制编辑弹出层的显示和隐藏
				thatRulesData: {}, // 声明一个变量，保存当前被点击的列表的数据
				page: {
					// 放置页码及相关数据
					page: 1,
					pagesize: 6,
					total: 0// 记录总数
				},
				isPermDialogShow: false, // 声明一个变量，控制分配权限的弹出层的显示和隐藏
				permData: [], // 专门用来接收权限数据 树形数据
				defaultProps: { // 定义显示字段的名称 和 子属性的字段名称
					label: 'name'
				},
				userId: null, // 分配权限时，记录当前被点击的这一项的id
				selectCheck: []// 声明一个变量，记录角色已拥有的权限点的数据
      };
  },
	computed: {
		...mapGetters(['companyId'])
	},
	created() {
		this.getCompanyUserInfo()
		this.getCompanyInfo()
	},
	methods: {
		// 获取公司所有角色列表《《《《《——————————————————————————————————
		async	getCompanyUserInfo() {
			const { total, rows } = await getCompanyUserInfoAPI(this.page)
			this.page.total = total
			this.tableData = rows
		},
		// 点击分页组件，切换分页+显示新数据《《《《《——————————————————————————————————
		changePage(newpage) {
			// newpage是当前的最新页码
			this.page.page = newpage
			this.getCompanyUserInfo()
		},
		// 获取企业信息的列表
		async getCompanyInfo() {
			const res = await getCompanyInfoAPI(this.companyId)
			this.formData = res
		},
		// 点击删除按钮，根据角色id，删除角色信息《《《《《——————————————————————————————————
		// rowdata：当前被点击的一行的数据信息，其中包含id
		async	delRoles(rowdata) {
			try {
				await this.$confirm('您确定要删除该部门角色吗？')
				await delCompanyRolesInfoAPI(rowdata.id)// 调用接口，删除部门角色
				this.getCompanyUserInfo()// 重新获取公司的所有角色列表
				this.$message.success('成功删除列表角色')
			} catch (err) {
				console.log(err);
			}
		},
		// 点击删除按钮，根据角色id，删除角色信息《《《《《——————————————————————————————————
		async	editRoles(rowdata) {
			// 1、调用获取数据列表的接口，获取数据，实现回传
			const res = await getCompanyRolesInfoAPI(rowdata.id)
			this.thatRulesData = res
			// 2、弹出编辑弹出层
			this.isDialogShow = true
		},
		// 调用编辑弹出层的子传父，重新刷新列表《《《《《——————————————————————————————————
		updateForm() {
			this.getCompanyUserInfo()// 重新获取公司的所有角色列表
		},
		// 点击新增角色的按钮，弹出新增的弹出层，新增角色《《《《《——————————————————————————————————
		async	addRules() {
			this.isDialogShow = true
		},
		// 点击分配权限按钮，打开弹出层，分配权限《《《《《——————————————————————————————————
		async	assignPerm(id) {
			// 获取权限点数据，显示所有的权限点(直接用递归，转化成树形结构)
			this.permData = tranListToTreeData(await	getPermissionListAPI(), '0')
			this.userId = id
			const { permIds } =	await getCompanyRolesInfoAPI(id)// 当前角色所拥有的角色点数据
			this.selectCheck = permIds
			this.isPermDialogShow = true

		},
		// 点击确定按钮，提交分配权限的数据《《《《《——————————————————————————————————
		async	btnPermOK() {
			//  this.$refs.permTree.getCheckedKeys()//获取到当前弹出层中被选中的所有权限的id
			const res = await assignPermAPI({ permIds: this.$refs.permTree.getCheckedKeys(), id: this.userId })
			this.$message.success('分配权限成功!')
			this.isPermDialogShow = false
		},
		// 点击取消按钮，关闭分配权限的弹出层《《《《《——————————————————————————————————
		btnPermCancel() {
			this.selectCheck = []// 重置数据
			this.isPermDialogShow = false

		}
	}

}
</script>

<style lang="scss" scoped></style>